<template>
  <div class="admin-container">
    <!-- 头部 -->
    <top-bar-controller />

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <sider-bar class="sider-bar" />

      <!-- 右侧主内容区域 -->
      <div class="router-view-container">
        <router-view />
      </div>
    </div>

    <!-- 底部 -->
    <footer-bar />
  </div>
</template>
<script>
import SiderBar from '@/components/SiderBar.vue';
import TopBarController from '@/components/TopBarController.vue';
import FooterBar from '@/components/FooterBar.vue';
export default {
  components: { SiderBar, TopBarController, FooterBar },
  data() {
    return {
      
    };
  },
  mounted() {
    console.log('admin mounted')
  }
}
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 至少占满视口高度 */
}

.main-content {
  display: flex; /* 使用 Flex 布局 */
  flex: 1; /* 占据剩余空间 */
  overflow: auto; /* 内容溢出时滚动 */
}

.sider-bar {
  width: 240px;
  background-color: #304156;
  flex-shrink: 0; /* 不收缩 */
}

.router-view-container {
  flex: 1; /* 占据剩余空间 */
  padding: 20px;
  background-color: #fff;
  overflow-y: auto; /* 竖向滚动 */
}

/* 让 footer-bar 自动跟随内容到底部 */
footer-bar {
  width: 100%;
  box-sizing: border-box;
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px 0;
}
</style>